<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script src="../../libs/js/graphical/raphael.js" type="text/javascript" ></script>
<script src="../../libs/js/graphical/chart-multiRing.js" type="text/javascript" ></script>
</head>
<style>
	#content {
	position:absolute;
	top:50%;
	left:50%;
	margin:-300px 0 0 -450px;
	width:900px;
	height:600px;
	}

	.legend {
	float:left;
	width:250px;
	margin-top:140px;
	}

	#content h1 {
	font-family:'Cabin Sketch', arial, serif;
	text-shadow:3px 3px 0 #ddd;
	color:#193340;
	font-size:40px;
	margin-bottom:40px;
	text-align:right;
	}

	.skills {
	float:left;
	clear:both;
	width:100%;
	}

	.skills ul,
	.skills li {
	display:block;
	list-style:none;
	margin:0;
	padding:0;
	}

	.skills li {
	float:right;
	clear:both;
	padding:0 15px;
	height:35px;
	line-height:35px;
	color:#fff;
	margin-bottom:1px;
	font-size:18px;
	}

	.skills .jq {
	background:#99ccff;
	}

	.skills .css {
	background:#80e6b3;
	}

	.skills .html {
	background:#81def6;
	}

	.skills .php {
	background:#ffaa80;
	}

	.skills .sql {
	background:#ffcc80;
	}	
	#diagram {
	float:right;
	width:600px;
	height:600px;
	}

	.get {
	display:none;
	}
</style>
<body>
<div id="content">
			<div class="legend">
				<div class="skills">
					<ul>
						<li class="jq">阅读</li>
						<li class="css">听力</li>
						<li class="html">书写</li>
						<li class="php">翻译</li>
						<li class="sql">口语</li>
					</ul>
				</div>	
			</div>
			<div id="diagram"></div>
		</div>

	

		<div class="get">
			<div class="arc">
				<span class="text">阅读</span>
				<input type="hidden" class="percent" value="95" />
				<input type="hidden" class="color" value="#39f" />
			</div>
			<div class="arc">
				<span class="text">听力</span>
				<input type="hidden" class="percent" value="90" />
				<input type="hidden" class="color" value="#00cc66" />
			</div>
			<div class="arc">
				<span class="text">书写</span>
				<input type="hidden" class="percent" value="80" />
				<input type="hidden" class="color" value="#03bdec" />
			</div>
			<div class="arc">
				<span class="text">翻译</span>
				<input type="hidden" class="percent" value="53" />
				<input type="hidden" class="color" value="#ff5500" />
			</div>
			<div class="arc">
				<span class="text">口语</span>
				<input type="hidden" class="percent" value="45" />
				<input type="hidden" class="color" value="#ff9900" />
			</div>
		</div>
</body>
</html>